<template>
	<view class="boxx">
		<!-- 页面头部 -->
		<div class="head">
			<!-- 返回按钮 -->
			<img src="../../static/img/fanhui.png" alt="" class="return_botton" @click="bc">
			<!-- 页面标题 -->
			<p class="title">我的加入的社团</p>
		</div>
		<!-- 占位 -->
		<div class="mark_one"></div>
		<!-- 内容区 -->
		<div class="content" v-for="item in items" >
			<!-- 社团头像 -->
			<img :src="item.community_id__avatar" alt="" class="group_img">
			<!-- 社团名称 -->
			<p class="name">{{item.community_id__name}}</p>
			<!-- 社团人数图片 -->
			<img src="../../static/img/7.png" alt="" class="number_img">
			<!-- 社团人数 -->
			<p class="number">{{item.community_id__num}}</p>
		</div>
		
		<view class="nothing" v-if="!items[0]">
			<text>当前还没有加入任何社团</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: []
			}
		},
		methods: {
			bc () {
				uni.navigateBack()
			}
		},
		async onShow() {
			if (this.$store.state.userInfo.nickname) {
				let res = await uni.request({
					url: this.$config.basisIP,
					method: "POST",
					data: {
						fun: "query",
						query_type: "communitied",
						username: this.$store.state.userInfo.username,
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					}
				})
				
				this.items = res[1].data.result
			}
		}
	}
</script>

<style scoped>
	/* 页面头部  */
	.head {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 76rpx;
		line-height: 76rpx;
		background-color: white;
		/* 高行高 76 */

	}

	/* 返回按钮 */
	.return_botton {
		float: left;
		margin-top: 20rpx;
		/* 20 */
		margin-left: 20rpx;
		width: 36rpx;
		/* 36 */
		height: 36rpx;
		/* 36 */

	}

	/* 页面标题 */
	.title {
		float: left;
		margin-left: 232rpx;
		/* 272 */
		font-size: 30rpx;
		/* 30 */
		font-weight: bold;
		text-align: center;
	}

	.mark_one {
		height: 76rpx;
		/* 76 */
	}

	/* 内容区 */
	.content {
		margin: 0 auto;
		margin-top: 18rpx;
		/* 18 */
		width: 701rpx;
		/* 701 */
		height: 145rpx;
		/* 145 */
		background-color: #FFEC8B;
		border-radius: 9rpx;
		box-shadow: 18rpx 18rpx 54rpx 18rpx #F5F5F5;
	}

	/* 社团头像 */
	.group_img {
		float: left;
		margin-top: 16rpx;
		margin-left: 16rpx;
		/* 16 */
		width: 106rpx;
		border-radius: 9rpx;
		height: 109rpx;
		/* 109 */
	}

	/* 社团名称 */
	.name {
		float: left;
		margin-top: 16rpx;
		margin-left: 16rpx;
		/* 16 */
		font-size: 24rpx;
		/* 24 */
		width: 145rpx;
	}

	/* 社团人数图片 */
	.number_img {
		float: left;
		margin-top: 89rpx;
		/* 87 */
		margin-left: -140rpx;
		/* -140 */
		width: 36rpx;
		/* 36 */
		height: 36rpx;
		/* 36 */
	}

	/* 社团人数 */
	.number {
		float: left;
		margin-top: 86rpx;
		/* 86 */
		margin-left: -91rpx;
		/* 91 */
		color: gray;
	}
</style>
